<template>
  <view class="flex-col page">
    <view class="flex-col justify-start items-end section">
      <!-- <view class="flex-row section_2" v-if="is_login">
        <text class="font text text_2">行情拿捏</text>
        <text class="font text ml-6-5">拿捏口粮</text>
      </view> -->
      <view class="flex-row section_2" v-if="is_login">
        <text class="font text text_2">行情拿捏</text>
        <text class="font text ml-6-5">拿捏口粮</text>
      </view>
      <!-- <u-navbar title="行情拿捏 拿捏口粮" leftIcon=" " :autoBack="false"  bgColor="#007e6b" placeholder="true"></u-navbar> -->
    </view>
    <view class="flex-col relative group">
      <!-- <view class="flex-row items-center section_3" v-if="is_login">
        <image
          class="image"
          src="http://ts.ysgzt.cn/static/images/wechat/resources/e66cc4f5397cb7460e7136bf19e0198c.png"
        />
        <view class="flex-col items-start flex-1 ml-11-5">
          <text class="font_2 text">磕磕.</text>
          <text class="mt-14 font_3 text text_3">15621453689</text>
        </view>
      </view> -->
      <view class="flex-row items-center section_3">
        <image class="image" :src="avatarUrl" />
        <view class="flex-col items-start flex-1 ml-11-5" @click='re_next()'>

          <text class="font_2 text">{{ userInfo.nickname }}</text>
          <!-- <button lass="font_2 text" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">{{userInfo.nickname}}</button> -->
          <!-- <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button> -->
          <text class="mt-14 font_3 text text_3" v-if='userInfo.mobile'>{{ userInfo.mobile }}</text>
        </view>
      </view>
      <view class="mt-8 flex-row justify-between section_4" v-if="is_login">
        <view class="flex-col items-start self-center">
          <text class="text text_4">会员专区</text>
          <text class="text text_6 mt-11-5">开通超会员免广告并进交流群</text>
        </view>
        <view class="flex-col justify-start items-center self-start text-wrapper"
          @click="tab_sel('/pages/index_mulu/jq_jl')">
          <text class="font_2 text text_5">开通</text>
        </view>
      </view>
      <view class="mt-8 flex-col section_5">
        <view class="flex-row justify-between group_2">
          <text class="font_2 text">昵称</text>
          <text class="font_2 text text_7">{{ userInfo.nickname }}</text>
        </view>
        <view class="flex-row justify-between items-center group_3">
          <text class="font_2 text">手机号</text>
          <text class="font_3 text text_8">{{ userInfo.mobile }}</text>
        </view>
        <view class="flex-col list">
          <view class="flex-row justify-between items-center group_4" @click="tab_sel('/pages/my/collect')">
            <text class="font_2 text">我的关注</text>
            <image class="image_2"
              src="http://ts.ysgzt.cn/static/images/wechat/resources/282c364b117bb65a2fcbb1d98d852015.png" />
          </view>
        </view>
        <view class="flex-col list">
          <view class="flex-row justify-between items-center group_4" @click="tab_sel('/pages/my/yq_list')">
            <text class="font_2 text">我的邀请</text>
            <image class="image_2"
              src="http://ts.ysgzt.cn/static/images/wechat/resources/282c364b117bb65a2fcbb1d98d852015.png" />
          </view>
        </view>
        <view class="flex-row justify-between items-center group_6" @click="tab_sel('/pages/my/yq')">
          <text class="font_2 text text_10">邀请用户</text>
          <view class="flex-row items-center group_7">
            <view class="flex-col justify-start text-wrapper_2"><text class="font_2 text text_11">邀新用户</text></view>
            <image class="ml-20 image_2 image_3"
              src="http://ts.ysgzt.cn/static/images/wechat/resources/282c364b117bb65a2fcbb1d98d852015.png" />
          </view>
        </view>
        <view class="flex-row justify-between items-center group_3" @click="tab_sel('/pages/my/ye_fanxian')">
          <text class="font_2 text">返利余额</text>
          <image class="image_2"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/282c364b117bb65a2fcbb1d98d852015.png" />
        </view>
      </view>
    </view>
    <view class="flex-col justify-start relative section_6 section_16">
      <view class="flex-row">
        <view class="flex-col items-center group_8 equal-division-item"
          @click="$util.redirectTo('/pages/index_new/index_jiu', {}, 'reLaunch')">
          <image class="image_4"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/02d7f445c0c10dec33dc384baa99b29e.png" />
          <text class="mt-4 font_4 text">首页</text>
        </view>

        <view class="ml-12 flex-col items-center group_8 equal-division-item"
          @click="$util.redirectTo('/pages/index_new/tab_jsq', {}, 'reLaunch')">
          <image class="image_4"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/1932f40347c8776a4a0376511baee2db.png" />
          <text class="mt-4 font_4 text">计算器</text>
        </view>
        <view class="ml-12 flex-col items-center group_8 equal-division-item">
          <image class="image_4"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/3e4fab963aab89266abb422ad574de3a.png" />
          <text class="mt-4 font_4 text">客服</text>
        </view>
        <view class="ml-12 flex-col items-center group_8 equal-division-item"
          @click="$util.redirectTo('/pages/index_new/tab_my', {}, 'reLaunch')">
          <image class="image_4"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/48e75fc1d8ba56efbba2dfb5794c8cee.png" />
          <text class="mt-4 font_4 text text_12">我的</text>
        </view>
      </view>
    </view>

    <u-popup :show="show_auth" mode="bottom" :round="20" :closeable="true" bgColor="#f2f6f7" @close="show_auth = false">
      <view class="flex-col justify-center auth">
        <view class="flex-col justify-center items-center self-stretch">
          <button class="auth-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image class="image_6" :src="avatarUrl" />
          </button>
          <text class="text_7s">上传头像</text>
        </view>
        <view class="flex-row items-center mt-26">
          <text class="font_2">昵称</text>
          <view class="flex-col justify-center items-start nickname ml-16">
            <input v-model="formData.nickname" @blur="blurNickName" type="nickname" class="font_3"
              placeholder="请输入昵称或点击输入框获取微信昵称" placeholder-class="placeholderClass" />
          </view>
        </view>
        <view class="flex-row justify-between mt-26">
          <view class="flex-col items-start">
            <text class="font_2">手机号</text>
            <text class="text_9 mt-6">点击一键授权登录小程序</text>
          </view>
          <button class="auth-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
            v-if="formData.mobile == ''">
            <view class="flex-col justify-center items-center button_2">
              <text class="text_8">一键授权</text>
            </view>
          </button>
          <view class="flex-col items-start" v-if="formData.mobile">
            <text class="font_2">{{ formData.mobile }}</text>
          </view>
        </view>
        <view class="flex-col justify-center items-center button_3" @click="login">
          <text class="text_10">立即登录</text>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      items: [null, null],
      avatarUrl: 'https://www.dlxx.top/static/images/52b8572190fdb04824436da527838801.png',
      is_login: 0.,
      userInfo: { 'nickname': '未登录' },
      show_auth: false,
      formData: {
        headimg: '',
        nickname: '',
        mobile: '',
      },
      // 小程序获取手机号所需数据
      authMobileData: {
        iv: '',
        encryptedData: ''
      },
    };
  },
  onLoad(options) {
    if (options.type) this.type = options.type;
    //uni.clearStorageSync('userInfo')
    this.userInfo = uni.getStorageSync('userInfo');
    this.getUserInfo();
    this.is_login = true
  },
  methods: {
    re_next() {
      if (!this.formData.mobile) {
        this.login()
      }
    },
    getUserInfo() {
      this.$api.sendRequest({
        url: '/api/member/info',
        data: {
          user_id: this.userInfo.id
        },
        success: res => {
          if (res.code == 1) {
            uni.setStorageSync('userInfo', res.data);
            this.userInfo = res.data;
            this.avatarUrl = this.userInfo.avatar ? this.$util.img(this.userInfo.avatar) :
              this.avatarUrl;
            this.formData.headimg = this.userInfo.avatar;
            this.formData.nickname = this.userInfo.nickname;
            this.formData.mobile = this.userInfo.mobile;

            if (this.type == 1 && !this.formData.mobile) this.show_auth = true;
          }
        }
      });
    },
    // 上传头像
    onChooseAvatar(e) {
      this.avatarUrl = e.detail.avatarUrl;
      uni.getFileSystemManager().readFile({
        filePath: this.avatarUrl, //选择图片返回的相对路径
        encoding: 'base64', //编码格式
        success: res => {
          let base64 = 'data:image/jpeg;base64,' + res.data; //不加上这串字符，在页面无法显示的哦

          this.$api.uploadBase64({
            base64,
            user_id: this.userInfo.id,
            success: res => {
              if (res.code == 1) {
                this.formData.headimg = res.data.file;
                this.$api.sendRequest({
                  url: '/api/member/modifyheadimg',
                  data: {
                    user_id: this.userInfo.id,
                    headimg: this.formData.headimg
                  },
                  success: res => {
                    if (res.code == 1) {
                      this.$util.showToast({
                        title: '上传成功'
                      });
                    }
                  }
                });
              } else {
                this.$util.showToast({
                  title: res.message
                });
              }
            },
            fail: () => {
              this.$util.showToast({
                title: '上传失败'
              });
            }
          })
        }
      });
    },
    blurNickName(e) {
      if (e.detail.value) {
        this.formData.nickname = e.detail.value;
        this.$api.sendRequest({
          url: '/api/member/modifynickname',
          data: {
            user_id: this.userInfo.id,
            nickname: this.formData.nickname
          },
          success: res => {
            if (res.code == 1) {

            }
          }
        });
      }
    },

    getPhoneNumber(e) {
      if (e.detail.errMsg == 'getPhoneNumber:ok') {
        let authData = uni.getStorageSync('authInfo');
        if (authData) Object.assign(this.authMobileData, authData, e.detail);
        if (uni.getStorageSync('source_member')) this.authMobileData.source_member = uni.getStorageSync(
          'source_member');
        this.authMobileData.user_id = this.userInfo.id;

        this.$api.sendRequest({
          url: '/api/weapp/getPhoneNumber',
          data: this.authMobileData,
          success: res => {
            if (res.code == 1) {
              this.formData.mobile = res.data.phoneNumber;
              this.$api.sendRequest({
                url: '/api/member/modifymobile',
                data: {
                  user_id: this.userInfo.id,
                  mobile: this.formData.mobile
                },
                success: res => {
                  if (res.code == 1) {
                    this.$util.showToast({
                      title: '获取成功'
                    });
                  } else {
                    this.$util.showToast({
                      title: res.message
                    });
                  }
                }
              });
            } else {
              this.formData.mobile = '';
              this.$util.showToast({
                title: res.message
              });
            }
          }
        });
      } else {
        this.$util.showToast({
          title: '为了保证您账户的统一性，取消授权将无法为您提供服务'
        })
      }
    },
    login() {
      this.show_auth = true
      this.getUserInfo();
      //this.show_auth = false;
    },
    tab_sel(url) {
      if (this.is_login) {
        uni.navigateTo({
          url: url,
        })
      } else {
        this.login()
      }
    }
  },
};
</script>



<style scoped lang="scss">
.ml-11-5 {
  margin-left: 23rpx;
}

.mt-11-5 {
  margin-top: 23rpx;
}

.ml-6-5 {
  margin-left: 13rpx;
}

.page {
  background-color: #00000000;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  .section {
    padding: 135rpx 0 168rpx;
    background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/2adac09c07331671b84f4995b0d43fe6.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .section_2 {
      margin-right: 10rpx;
      padding: 0rpx 0 16rpx;
      /*background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/e5d307e788484f3c95fbe7d2360ff36a.png');*/
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 674rpx;

      .font {
        font-size: 48rpx;
        font-family: FZZDHJW;
        line-height: 45rpx;
        color: #ffffff;
      }

      .text_2 {
        margin-left: -8rpx;
      }
    }
  }

  .group {
    margin-top: -112rpx;
    padding: 0 16rpx;

    .section_3 {
      padding: 40rpx;
      background-color: #ffffff;
      border-radius: 10rpx;

      .image {
        width: 80rpx;
        height: 80rpx;
      }

      .text_3 {
        color: #000000;
      }
    }

    .section_4 {
      padding: 40rpx 32rpx 40rpx 39rpx;
      background-image: linear-gradient(45deg, #f0d7ad 0%, #edc796 100%);
      border-radius: 10rpx;

      .text_4 {
        color: #743a01;
        font-size: 30rpx;
        font-family: PingFangSC;
        line-height: 29rpx;
      }

      .text_6 {
        color: #743a01;
        font-size: 24rpx;
        font-family: PingFangSC;
        line-height: 23rpx;
      }

      .text-wrapper {
        margin-top: 18rpx;
        padding: 16rpx 0;
        background-color: #ffffff;
        border-radius: 29rpx;
        width: 128rpx;
        height: 58rpx;

        .text_5 {
          color: #743a01;
        }
      }
    }

    .font_2 {
      font-size: 28rpx;
      font-family: PingFangSC;
      line-height: 26rpx;
      color: #00140d;
    }

    .section_5 {
      padding: 0 23rpx 258rpx 31rpx;
      background-color: #ffffff;
      border-radius: 10rpx;

      .group_2 {
        padding: 37rpx 0 26rpx;

        .text_7 {
          color: #999999;
          line-height: 25rpx;
        }
      }

      .group_3 {
        padding: 34rpx 0 24rpx;
        border-top: solid 3rpx #eeeeee;
        border-bottom: solid 3rpx #eeeeee;

        .text_8 {
          margin-right: 5rpx;
          color: #999999;
        }
      }

      .list {
        padding-top: 3rpx;

        .group_4 {
          padding: 30rpx 0 27rpx;
          border-bottom: solid 3rpx #eeeeee;
        }
      }

      .group_6 {
        padding: 22rpx 0 19rpx;

        .text_10 {
          line-height: 27rpx;
        }

        .group_7 {
          margin-right: 9rpx;

          .text-wrapper_2 {
            padding: 10rpx 0;
            background-image: linear-gradient(86deg, #ff934c 0%, #fc686f 100%);
            border-radius: 23rpx;
            height: 46rpx;

            .text_11 {
              margin-left: 14rpx;
              margin-right: 8rpx;
              color: #ffffff;
              line-height: 27rpx;
            }
          }

          .image_3 {
            margin-right: 0;
          }
        }
      }

      .image_2 {
        margin-right: 9rpx;
        width: 10rpx;
        height: 16rpx;
      }
    }

    .font_3 {
      font-size: 28rpx;
      font-family: PingFangSC;
      line-height: 22rpx;
    }
  }

  .text {
    text-transform: uppercase;
  }

  .section_6 {
    margin-top: -41rpx;
    padding-bottom: 70rpx;
    background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/b0c65f9e1a445110392bf031fbc26685.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .group_8 {
      flex: 1 1 169.5rpx;

      .image_4 {
        width: 48rpx;
        height: 48rpx;
      }

      .font_4 {
        font-size: 20rpx;
        font-family: PingFangSC;
        line-height: 20rpx;
        color: #011613;
      }

      .text_12 {
        color: #00806b;
      }
    }

    .equal-division-item {
      padding: 10rpx 0;
    }
  }
}

.zz {
  width: 100%;
  height: 100vh;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #00000090;


}

.auth-button::after {
  border: 0 !important;
}

.auth-button {
  background: none !important;
  margin: 0 !important;
}

.auth {
  padding: 80rpx 36rpx 20rpx;
  font-size: 26rpx;
}

.text_7s {
  color: #333;
  font-size: 26rpx;
  margin-top: -20rpx;
}

.image_6 {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  margin-top: 20rpx;
}

.nickname {
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  height: 60rpx;
  width: 90%;
}

input {
  width: 100%;
}

.font_6 {
  font-size: 26rpx;
}

.text_9 {
  color: #a3a3a3;
  font-size: 22rpx;
  font-family: SourceHanSansCN;
  line-height: 20rpx;
}

.button_2 {
  background-color: #141414;
  width: 160rpx;
  height: 50rpx;
  border-radius: 25rpx;
}

.text_8 {
  font-size: 26rpx;
  color: #fff;
}

.button_3 {
  background-color: #141414;
  width: 600rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin: 20rpx auto;
  margin-top: 100rpx;
}

.text_10 {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
}
</style>
